<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span>市场准入：</span>
          <span style="font-size: 16px; margin-right: 20px">{{ ChanceInfo.chanceName }}</span>

          <el-tag type="warning" size="small">
            <span>{{ getLabel("chance_status", ChanceInfo.chanceStatus) }}</span>
            <span v-if="ChanceInfo.flowStatus=='REJECT_INITIATOR'">[{{ getLabel('approval_result',ChanceInfo.flowStatus) }}]</span>
          </el-tag>

        </div>
      </template>
      <template #btn>
        <el-button class="main-btn" size="small" @click="back()">返回</el-button>

        <template v-if="ChanceInfo.id">
          <el-button v-auth="{v: ['crm:chance:pms'],bool:ChanceInfo.chanceStatus == -2 || ChanceInfo.chanceStatus == -1}" class="delete-btn" size="small" @click="deleteChance">删除</el-button>

          <el-button v-auth="{v: ['crm:chance:pms'],bool:ChanceInfo.chanceStatus == 0 || ChanceInfo.chanceStatus == -1 || ChanceInfo.flowStatus=='REJECT_INITIATOR'}" class="main-btn" size="small" type="primary" @click="onEdit">编辑</el-button>

<!--          <el-button v-auth="{v: ['crm:chance:createPlan'],bool:ChanceInfo.chanceStatus == 2}" class="main-btn" size="small" type="primary" @click="successPlan">创建营销规划</el-button>-->

          <el-button v-auth="{v: ['crm:chance:end'],bool:ChanceInfo.chanceStatus == 2}" class="main-btn" size="small" type="primary" @click="overChance">结束市场准入</el-button>
        </template>

      </template>

    </header-module>
    <div class="main-content">
      <div class="base-info-conter">
        <item-title title="基本信息" />
        <base-info :chance-info="ChanceInfo" />

        <plan :plan-detail="planDetail" />

        <item-title title="操作记录" />
        <operation-view mode="chance" />
      </div>
    </div>

    <!-- 创建编辑弹框 -->
    <createOrChange
      ref="createChangeDialog"
      title="编辑市场准入"
      @success="success"
    />

    <createPlanDialog ref="createPlan" />

  </div>
</template>

<script>
import {defineAsyncComponent, getCurrentInstance, inject, onMounted, reactive, ref, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Index',
  components: {
    BaseInfo: defineAsyncComponent(() => import('./modules/baseInfo.vue')),
    Plan: defineAsyncComponent(() => import('./modules/plan.vue')),
    createOrChange: defineAsyncComponent(() =>
      import('../modules/createOrChange.vue')
    ),
    createPlanDialog: defineAsyncComponent(() =>
            import('../modules/createPlanDialog.vue')
    ),
  },
  setup(props, context) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const router = useRouter()
    const route = useRoute()
    const createChangeDialog = ref(null)
    console.log(route.query)
    const back = () => {
      // router.push({
      //   path: '/business/chance'
      // })
      router.back()
    }
    var data = reactive({
      ChanceInfo: {},
      createPlan: null
      // PlanDetail:[]
    })
    var planDetail = reactive([])
    const getDetail = () => {
      api.chance.CHANCE_DETAIL(route.query.id).then((res) => {
        console.log(res)
        // data.ChanceInfo = res.data.ChanceInfo
        // console.log(data)
        if (!res.code) {
          data.ChanceInfo = res.data.ChanceInfo
        }
      })
    }

    const onEdit = () => {
      createChangeDialog.value.open(data.ChanceInfo)
    }

    const success = () => {
      getDetail()
    }

    const overChance = () => {
      currentInstance.proxy
        .alertBox({ message: '结束市场准入后，此市场准入将不能进行操作，确定结束吗？', title: '确认' })
        .then(() => {
          api.chance.CHANCE_END(data.ChanceInfo.id).then((res) => {
            if (!res.code) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: res.msg,
              })
              getDetail()
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const deleteChance = () => {
      currentInstance.proxy
        .alertBox({
          message: '删除市场准入后将不可恢复，确认删除吗？',
          title: '确认',
        })
        .then(() => {
          api.chance.CHANCE_DELETE(data.ChanceInfo.id).then((res) => {
            if (!res.code) {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: res.msg,
              })
              router.back()
            }
          })
          console.log('确定')
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const successPlan = () => {
      data.createPlan.openDialog(data.ChanceInfo.id)
    }

    onMounted(() => {
      getDetail()
      // getPlanDetail()
    })
    return {
      ...toRefs(data),
      planDetail,
      api,
      back,
      route,
      createChangeDialog,

      onEdit,
      success,
      successPlan,
      overChance,
      deleteChance,
    }
  }
}
</script>

<style scoped>

</style>
